import React, { createRef } from 'react';
import classNames from 'classnames';
import styles from './ReactNode.less';
import { getDvaApp, history } from 'umi';
import { NodePopover } from './NodePopover';
import { SyncOutlined } from '@ant-design/icons';
import { EventItemType, RunState, CanvasMode } from '../dict';

// 获取思路：
// ant-design 4.x 系列使用的 webpack + umi， umi内部使用plugin的方式集成了 dva
// 在 ./src/.umi/plugin-dva/umiExports.ts 中 可以找到导出方式
// 在 react 组件中，可以使用 connect 之后，props 就包含了 dispatch
// 在 这里使用这个方法
const dispatch = (...args) => {
  const dva = getDvaApp();
  // eslint-disable-next-line no-underscore-dangle
  dva._store.dispatch(...args);
};

class ReactNode extends React.Component {
  twinkleHandle = null;

  twinkleShow = false;

  twinkleref;

  constructor(props) {
    super(props);
    this.state = { twinkleShow: true };
    this.twinkleref = createRef(null);
    this.twinkleref.current = this.state.twinkleShow;
  }

  componentDidMount() {
    const { canvasMode, node } = this.props;
    if (canvasMode === CanvasMode.Run && node.data?.runstate === RunState.Run) {
      this.twinkleHandle = setInterval(() => {
        this.setState({ twinkleShow: !this.twinkleref.current });
      }, 700);
    }
  }

  // shouldComponentUpdate(nextProps, nextState) {
  //   const preProps = this.props;
  //   if (
  //     (preProps.id === preProps.selectedId || preProps.id === nextProps.selectedId) &&
  //     preProps.node &&
  //     preProps.node.hasChanged('data')
  //   ) {
  //     return true;
  //   }
  //   return false;
  // }

  onClick = (id, event) => {
    const { updateSelectedState, node, canvasMode } = this.props;
    if (canvasMode === CanvasMode.Editor)
      dispatch({ type: 'wfeditor/selected', payload: { id, type: node.data?.type } });
    if (updateSelectedState) updateSelectedState(id);
  };

  iconColor = (type) => {
    const { canvasMode, node } = this.props;
    if (canvasMode === CanvasMode.Run) {
      // 运行态的 图标 颜色
      if (node.data?.runstate === RunState.Pass) return '#3DAB94FF';
      else if (node.data?.runstate === RunState.Run) return '#FF9400FF';
      return '#B3B3B3FF';
    }

    let color;
    switch (type) {
      case EventItemType.WorkTask:
        color = '#007AFFFF';
        break;
      case EventItemType.VerifyTask:
        color = '#FF9400FF';
        break;
      case EventItemType.StartEvent:
        color = '#3DAB94FF';
        break;
      case EventItemType.EndEvent:
        color = '#ED5C3FFF';
        break;
      default:
        break;
    }
    return color;
  };

  iconBgColor = (type) => {
    const { canvasMode, node } = this.props;
    if (canvasMode === CanvasMode.Run) {
      // 运行态的 图标背景 颜色
      if (node.data?.runstate === RunState.Pass) return '#3DAB941A';
      else if (node.data?.runstate === RunState.Run) return '#FF94001A';
      return '#9999991F';
    }

    let color;
    switch (type) {
      case EventItemType.WorkTask:
        color = '#007AFF1A';
        break;
      case EventItemType.VerifyTask:
        color = '#FF94001A';
        break;
      case EventItemType.StartEvent:
        color = '#3DAB941A';
        break;
      case EventItemType.EndEvent:
        color = '#ED5C3F1A';
        break;
      default:
        break;
    }
    return color;
  };

  getRunIcon = () => {
    const { node, canvasMode } = this.props;
    if (canvasMode === CanvasMode.Editor || node.data.runstate === RunState.Wait) return null;

    return (
      <div className={styles.stateIcon}>
        {node.data.runstate === RunState.Run ? (
          <SyncOutlined spin style={{ color: '#FF9400FF' }} />
        ) : (
          <i className="iconfont icon-zhengchang" style={{ color: '#66BE82' }} />
        )}
      </div>
    );
  };

  textTwinkStyle = () => {
    const { node, canvasMode } = this.props;
    if (canvasMode === CanvasMode.Editor) return null;
    if (node.data?.runstate !== RunState.Run) return null;
    return {
      display: this.state.twinkleShow ? 'unset' : 'none',
    };
  };

  render() {
    const { node, canvasMode } = this.props;
    const { id, data } = node;
    this.twinkleref.current = this.state.twinkleShow;
    return (
      <div
        className={classNames(styles.reactNode, { [styles.selected]: data.selected })}
        onClick={this.onClick.bind(this, id)}
      >
        <NodePopover status={{ nodeName: 'string', desc: 'string' }} canvasMode={canvasMode}>
          <div
            className={styles.iconBlock}
            style={{ backgroundColor: this.iconBgColor(data.type) }}
          >
            <i
              className={classNames('iconfont', {
                'icon-liuchengjiedian': data.type === EventItemType.WorkTask,
                'iconfont icon-shenpijiedian': data.type === EventItemType.VerifyTask,
                'icon-faqiliucheng': data.type === EventItemType.StartEvent,
                'icon-jieshuliucheng': data.type === EventItemType.EndEvent,
              })}
              style={{ color: this.iconColor(data.type) }}
            />
          </div>
          <div className={styles.title} style={this.textTwinkStyle()} title={data.desc}>
            {data.desc}
          </div>
          {this.getRunIcon()}
        </NodePopover>
      </div>
    );
  }

  componentWillUnmount() {
    if (this.twinkleHandle) {
      clearInterval(this.twinkleHandle);
      this.twinkleHandle = null;
    }
  }
}

export default ReactNode;
